<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input
            placeholder="输入电影名进行搜索"
            v-model="query.filmName"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getFilmList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="toAddFilm">添加影片</el-button>
        </el-col>
      </el-row>
      <!-- stripe隔行变色 -->
      <el-table :data="filmList" :border="true" stripe :resizable="false">
        <el-table-column
          type="index"
          fixed
          :resizable="false"
        ></el-table-column>
        <el-table-column label="海报" width="100" prop="filmPicture" fixed>
          <template v-slot="scope">
            <img
              style="width: 83px; height: 122px"
              :src="scope.row.filmPicture"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="电影名"
          width="200"
          prop="filmName"
          fixed
          :resizable="false"
        ></el-table-column>

        <el-table-column
          label="类型"
          width="200"
          prop="categoryList"
          :resizable="false"
        >
          <template v-slot="scope">
            <el-tag
              size="mini"
              v-for="item in scope.row.categoryList"
              :key="item.cateNo"
              >{{ item.cateName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="地区"
          width="100"
          prop="area.fareaName"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="导演"
          width="200"
          prop="directorList"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="演员"
          width="200"
          prop="actorList"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="50"
          prop="filmStatus"
          :resizable="false"
        ></el-table-column>
        <el-table-column label="评论">
          <template v-slot="scope">
            <router-link
              class="stills"
              :to="{
                path: '/evaluation',
                query: { id: scope.row.filmId, filmName: scope.row.filmName },
              }"
              >查看评论</router-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="270"
          :resizable="false"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-info"
              @click="showDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="editFilm(scope.row.filmId)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeFilmById(scope.row.filmId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, jumper,total,sizes"
        :total="total"
 
      >
      </el-pagination> -->
    </el-card>

    <!-- 影片详情抽屉 -->
    <el-drawer
      title="影片详情"
      v-model:visible="drawer"
      :direction="direction"
      class="detailForm"
    >
      <el-form label-position="left" label-width="80px" style="height: 800px">
        <el-form-item label-width="0">
          <img
            :src="filmDetail.filmPicture"
            style="width: 216px; height: 302px"
          />
        </el-form-item>
        <el-form-item label="影片名称">
          <span>{{ filmDetail.filmName }}</span>
        </el-form-item>
        <el-form-item label="英文名称">
          <span>{{ filmDetail.filmEnName }}</span>
        </el-form-item>
        <el-form-item label="影片时长">
          <span>{{ filmDetail.filmLength }}分钟</span>
        </el-form-item>
        <el-form-item label="影片状态">
          <span>{{ filmDetail.filmStatus }}</span>
        </el-form-item>
        <el-form-item label="评分">
          <span>{{ filmDetail.filmScore }}</span>
        </el-form-item>
        <el-form-item label="上映时间">
          <span>{{ filmDetail.filmShowTime }}</span>
        </el-form-item>
        <el-form-item label="年代">
          <span>{{ filmDetail.filmAge }}</span>
        </el-form-item>
        <el-form-item label="区域">
          <span>{{ filmDetail.area.fareaName }}</span>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance } from 'vue';

let filmList = ref([])
let addDialogVisible = ref(false)

      let addForm = reactive({})
      let editDialogVisible = ref(false)
      let editForm = reactive()
      let total = ref(0)
      let drawer = ref(false)
      let direction = ref("rtl")
      let filmDetail = reactive({
        area: {},
      })
      let query = reactive({
        filmName: "",
      })



</script>
<style lang="less" scoped>
</style>